<template>
    <div class="template-selection-page">
        <el-page-header @back="goBack" content="留言板"></el-page-header>
        <div>
            <el-row :gutter="20">
                <div class="grid-content bg-purple" style="text-align: right;">
                    <el-row align="right">
                        <h2 v-text="siteId"></h2>
                    </el-row>
                    <el-row align="left">
                        <el-button style="width: 100px;">今天</el-button>
                        <el-button style="width: 100px;">昨天</el-button>
                        <el-button style="width: 100px;">七天内</el-button>
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-row>
                </div>
            </el-row>
        </div>
        <div style="margin-top: 20px;">
            <el-table :header-cell-style="{ background: '#EBEEF2' }" :data="records" style=" width: 100%;">
                <el-table-column prop="number" label="账号">
                </el-table-column>
                <el-table-column prop="createTime" label="时间">
                </el-table-column>
                <el-table-column prop="channel" label="频道">
                </el-table-column>
                <el-table-column prop="telephone" label="手机">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">回复</el-button>

                        <el-button size="mini" slot="reference"
                            @click="killMessage(scope.$index, scope.row)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination :current-page.sync="currentPage" :page-size.sync="pageSize"
                :page-sizes="[5, 10, 20, 50, 100]" layout="prev, pager, next, sizes , total" :total="total" background
                style="margin-top: 10px;" @size-change="getMessageList" @current-change="getMessageList" />
        </div>
    </div>
</template>

<script>
import {deleteMessage, getMessageList} from '@/api/api.js'
export default {
    data() {
        return {
            value1: '', //日期选择器
            loading: false, // 添加加载状态
            currentPage: 1,//当前页数
            pageSize: 5,//每页显示条数
            total: 0,//总数
            siteId: 0,//从webSite获取的站点id
            activeName: "all",
            dialogFormVisible: false,
            records: [],
        };
    },
    created() {
        this.siteId = this.$route.query.id;
        this.getMessageList(this.siteId); // 组件创建时立即获取数据
    },
    methods: {
        //获取留言列表
        handleEdit(index, row) {
            console.log(index, row);
        },
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },

        //删除留言的弹窗
        killMessage(index, row) {
            console.log(index, row);
            this.$confirm('此操作将永久删除该留言, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMessage(row.id).then(async (resp) => {
                    if (resp.data.code == 200) {
                        if (this.currentPage > 1 && index === 0) this.currentPage--;
                        await this.getMessageList(this.siteId);
                        this.$message({ type: 'success', message: '删除成功!' });
                    } else { this.$message({ type: 'error', message: '删除失败!' }); }
                }).catch((e) => { this.$message({ type: 'error', message: '处理失败!' +e}); })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //获取留言列表
        async getMessageList(siteId) {
            try {
                this.loading = true;
                const response = await getMessageList({
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    siteId: siteId,
                });
                // 在这里打印response.data.code的值  
                console.log('Response code:', response.data.code);
                if (response.data.code == 200) {
                    this.records = response.data.result.records;
                    this.total = response.data.result.total;
                } else {
                    this.$message({ message: '留言列表获取失败！', type: 'error' });
                }
            } catch (e) {
                this.$message({ message: '留言列表获取失败！！！', type: 'error' });
            } finally {
                this.loading = false;
            }
        },

    },

    computed: {
        // searchDate(){
        // 这里之后对接后端
        // return this.selectedItems.filter(item => item.title.includes(this.searchInput));
        //   return this.selectedItems;
        // }
    },
    watch: {
        multipleSelection(nl, ol) {
            if (this.multipleSelection.length > 0)
                this.showControls = true;
            else
                this.showControls = false;
        },
    }
};
</script>

<style lang="scss" scoped>
.template-selection-page {
    text-align: center;
    margin: 20px;
}

.header h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.header p {
    font-size: 14px;
    color: #888;
    margin: 15px 0;
}

.category-tabs {
    margin-bottom: 20px;
}

//分页
.pagination ::v-deep .el-pagination .el-pager .number.active {
    background-color: #456ddc !important;
    border-color: #456ddc !important;
    color: white !important;
}

.pagination ::v-deep .el-pagination .el-pager .number {
    color: #456ddc !important;
}

.pagination ::v-deep .el-pagination {
    position: relative;
}

.pagination {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
}


.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    justify-items: center;
    justify-content: space-around;
    gap: 20px 30px;
}

.template-item {
    width: 300px;
    height: 170px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.grid-content .el-row > * {  
    margin-right: 20px; /* 为每个子元素设置右边距 */  
}  
  
.grid-content .el-row > *:last-child {  
    margin-right: 0; /* 移除最后一个子元素的右边距 */  
} 
</style>